<template>
  <view class="container">
    <view class="search-box">
      <view class="title">学生姓名：</view>
      <u-input
        @input="nameInput"
        placeholder="请输入学生姓名"
        border="surround"
        clearable
        v-model="queryParams.studentName"
      ></u-input>
    </view>

    <view
      @tap="toEwm(item)"
      v-for="(item, index) in stuList"
      :key="index"
      class="item-box"
    >
      <view class="item-header">
        <view class="item-name">{{ item.studentName }}</view>
        <view
          @tap.stop="changeXs(item)"
          class="item-edit"
        >
          修改
        </view>
      </view>
      <view class="item-detail">性别：{{ item.studentSex }}</view>
	  <view class="item-detail">学校：{{ item.schooName }}</view>
      <view class="item-detail">年级：{{ item.gradeName }}</view>
      <view class="item-detail">班级：{{ item.className }}</view>
<!--      <view class="item-detail">
        是否筛查：
        <text
          :style="{ color: item.isTest === 0 ? 'red' : 'green' }"
        >
          {{ scArr[item.isTest] }}
        </text>
      </view> -->
	  <view class="item-detail">档案编号：{{ item.studentId }}</view>
    </view>

    <view
      @tap="addXs"
      class="add-button"
    >
      +
    </view>

    <u-popup
      mode="center"
      :show="ewmShow"
      @close="ewmShow = false"
    >
      <view class="popup-content">
        <view class="popup-title">{{ stName }}</view>
        <ay-qrcode
          ref="qrcode"
          :modal="modal_qr"
          :url="code"
          @hideQrcode="hideQrcode"
          :height="200"
          :width="200"
        ></ay-qrcode>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { listFilesStudent } from "@/api/files/filesStudent";
import { getDicts } from "@/api/system/dict/data.js";
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue";

export default {
  components: {
    ayQrcode,
  },
  data() {
    return {
      code: "",
      modal_qr: false,
      scArr: {
        0: "否",
        1: "是",
      },
      stName: "",
      qrCodeBase64: "",
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      stuList: [],
      ewmShow: false,
    };
  },
  onShow() {
    this.fetchStudentList();
  },
  methods: {
    fetchStudentList() {
      listFilesStudent(this.queryParams).then((res) => {
        this.stuList = res.rows;
      });
    },
    addXs() {
      uni.navigateTo({
        url: "/pages/slcj/xsInfo",
      });
    },
    changeXs(item) {
      uni.navigateTo({
        url: `/pages/slcj/xsInfo?studentId=${item.studentId}`,
      });
    },
    toEwm(e) {
      this.stName = e.studentName;
	  const student = e
	    const studentBirth = student.studentBirth ? student.studentBirth.replace(/-/g, '/') : '';
	    //const studentSex = (student.studentSex && student.studentSex.trim() === '女') ? 'F' : 'M';
	    const screenType='M';
	    const studentId=student.studentId;
	    const schoolInfo=student.gradeName+student.className;
	    const qrData = [
	  	'<<',
	  	student.studentId,
	  	student.studentName,
	  	studentBirth,
	  	screenType,
	  	studentId,
	  	schoolInfo,
	  	'>>'
	    ].join(',');
	  this.code = qrData;
      this.modal_qr = true;
      this.$nextTick(() => {
        this.$refs.qrcode.crtQrCode();
      });
      this.ewmShow = true;
      this.modal_qr = false;
    },
    hideQrcode() {
      this.modal_qr = false;
    },
    nameInput(item) {
      this.queryParams.studentName = item;
      this.fetchStudentList();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #F2F2F2;
  min-height: 100vh;
  padding: 20rpx;
}
.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .title {
    margin-right: 10rpx;
    font-size: 30rpx;
  }
}
.item-box {
  width: 93%;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-name {
      font-size: 34rpx;
      font-weight: 600;
    }
    .item-edit {
      background-color: #67e3cb;
	  color: #fff;
      padding: 20rpx;
      border-radius: 10rpx;
	  padding: 12rpx 25rpx;
    }
  }
  .item-detail {
    font-size: 28rpx;
    color: #333;
    margin-top: 10rpx;
  }
}
.add-button {
  position: fixed;
  width: 100rpx;
  height: 100rpx;
  right: 40rpx;
  top: 50%;
  background-color: greenyellow;
  border-radius: 50%;
  text-align: center;
  line-height: 100rpx;
  font-size: 40rpx;
  z-index: 9999;
}
.popup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left:20rpx;
  .popup-title {
    font-size: 44rpx;
    font-weight: 550;
    margin-bottom: 20rpx;
  }
}
</style>